<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false"%><%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    pageContext.setAttribute("path",path);
    pageContext.setAttribute("basePath",basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="${path}/js/jquery/easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        function upldImg() {
            var imgF= document.getElementById("imgFile").files;
            var fileName= imgF[0].name;
            var fileSize= imgF[0].size;
            var fileType=imgF[0].type;
            if(fileSize>10485760){
                var imFile = $("#imgFile")
                imFile.after(imFile.clone().val(""));
                imFile.remove();
                jz.util.addMsg("info", "文件过大，请选择10MB以下的图片！");
                return;
            }
            var filetype=fileName.substr(fileName.lastIndexOf(".")+1).toLowerCase();
            var filterType="jpg,gif,bmp,png";//定义允许上传的文件后缀
            if(filterType.indexOf(filetype)==-1){
                var imFile = $("#imgFile");
                imFile.after(imFile.clone().val(""));
                imFile.remove();
                jz.util.addMsg("info", "文件格式不正确，请选择jpg,gif,bmp,png类型的图片！");
                return;
            }
            var file = imgF[0];
            var reader = new FileReader();

            //onload是异步操作
            $("#preNewsImg").css("display","block");
            reader.onload = function(e){
                show.innerHTML = '<img width="400px" height="331px" src="'+e.target.result+'" alt="img">';
            }
            reader.readAsDataURL(file);
        }
    </script>
</head>
<body>

<div class="col-xs-12" id="insertImgNewsNav" style="margin-bottom: 10px; padding: 0px;margin-left: 30px;">
    <label class="col-xs-2 control-label" style="padding-right: 7px; padding-left: 0px;width: 173px;">新闻插图<font color="red">*</font></label>
    <div class="col-xs-4" style="padding-left: 8px;">
        <input type="file" class="form-control" style="width: 240px;" maxlength="40"
               id="imgFile" name="imgFile"
               accept="image/gif,image/jpeg,image/png,image/bmp,image/x-png" placeholder="请输入新闻链接 " onchange="upldImg()" value="" />
        <input type="text" name="imgsrc" id="imgsrc" value=""/>
    </div>
    <label class="warning col-xs-6">请上传4:3(400px*331px)等比例的图片以达到最好效果</label>

</div>

<br/>
<br/>
</body>
</html>